<script>
  var tvmjsGlobalEnv = tvmjsGlobalEnv || {};
</script>

<script type="module">
  import { Tokenizer } from './dist/tokenizers-cpp/index.js';

  async function tokenizerFromJSON(jsonArrayBuffer) {
    return await Tokenizer.fromJSON(jsonArrayBuffer);
  }
  async function tokenizerFromSentencePiece(modelBuffer) {
    return await Tokenizer.fromSentencePiece(modelBuffer);
  }
  tvmjsGlobalEnv.tokenizerFromJSON = tokenizerFromJSON;
  tvmjsGlobalEnv.tokenizerFromSentencePiece = tokenizerFromSentencePiece;

</script>
<script>
  function handleChatUIInputEnter(event) {
    if (event.keyCode === 13) {
      tvmjsGlobalEnv.asyncOnGenerate();
    }
  }
</script>

<form>
  <select id="model">
    <option >vicuna-v1-7b-q4f32_0</option>
    <option selected="selected">RedPajama-INCITE-Chat-3B-v1-q4f32_0</option>
  </select>
</form>

<!-- <label>Pick a pre-compiled model or load your own model's mlc-chat-config.json:
  <input list="model-names" name="model" id="model"/></label>
<datalist id="model-names">
  <option value="vicuna-v1-7b-q4f32_0" ></option>
  <option value="RedPajama-INCITE-Chat-3B-v1-q4f32_0"></option>
</datalist> -->

<script src="dist/llm_chat.js"></script>
<link href="dist/llm_chat.css" rel="stylesheet" type="text/css"/>

<div class="chatui">
  <div class="chatui-chat" id="chatui-chat" height="100">
  </div>

  <div class="chatui-inputarea">
    <input id="chatui-input" type="text" class="chatui-input" onkeypress="handleChatUIInputEnter(event)" placeholder="Enter your message...">
    <button class="chatui-send-btn" onclick="tvmjsGlobalEnv.asyncOnGenerate()">Send</button>
  </div>
</div>

<div class="chatui-extra-control">
  <button class="chatui-reset-btn" onclick="tvmjsGlobalEnv.asyncOnReset()">Reset</button>
  <label id="chatui-info-label"></label>
</div>
